<template>
  <!--  基础的比较关系逻辑组件  -->
  <div>
    <!--  基本关系运算逻辑-->
    <el-tag>
      <div class="hor-layout-center relation-view">
        <div @click="editRelation">{{ relationItem.valueStr }}</div>
        <el-dropdown class="dropdown-view" trigger="click" @command="handleCommand">
          <i class="el-icon-circle-plus"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="and">并且</el-dropdown-item>
            <el-dropdown-item command="or">或者</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <i class="close-view el-icon-circle-close" @click="removeRelation"></i>
      </div>
    </el-tag>
    <!--  弹窗  -->
    <el-dialog title="编辑基础关系" center :visible.sync="dialogShow" :inline="true" width="50%">
      <el-form ref="formRef" style="margin: 20px 50px" @keyup.enter.native="saveData">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="条件属性">
              <el-input v-model="inputValue1"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="关系">
              <el-select ref="selectRef" class="base-con-select" v-model="selectValue" placeholder="请选择" filterable
                         @focus.native="selectFocus">
                <el-option v-for="(item,index) in options" :key="item.value" :label="item.label"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="条件值">
              <el-input type="text" v-model="inputValue2"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button type="primary" size="medium" @click="saveData">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
function isNumber(value) {
  let valueRule = (!(value.length > 1 && value.startsWith("0"))) && !isNaN(Number(value))
  return valueRule
}

export default {
  name: "base-relation",
  props: {
    value: {
      type: Object,
      default: () => {
        return {valueStr: ""}
      }
    }
  },
  watch: {
    value: {
      handler(newVal) {
        this.relationItem = newVal
      },
      immediate: true
    }
  },
  data() {
    return {
      relationItem: {valueStr: ""},
      dialogShow: false,
      inputValue1: "",
      inputValue2: "",
      selectValue: "",
      options: [
        {label: ">", value: ">"},
        {label: "<", value: "<"},
        {label: "==", value: "=="},
        {label: "!==", value: "!=="},
        {label: "contains", value: "contains"},
      ]
    }
  },
  methods: {
    selectFocus() {
      this.$refs.selectRef.toggleMenu()
    },
    generateId() {
      let color = "", letters = "0123456789ABCDEF"
      for (let i = 0; i < 5; i++) {
        color += letters[Math.floor(Math.random() * 16)]
      }
      return new Date().getTime() + color
    },
    handleCommand(command) {
      let relationData = JSON.parse(JSON.stringify(this.relationItem))
      //
      let relationItem = JSON.parse(JSON.stringify(relationData))
      relationItem.id = this.generateId()
      //
      let newRelationItem = {id: this.generateId(), model: "valueCon", value: {}, valueStr: "null"}
      relationData.children = [relationItem, {model: "connectPara", command}, newRelationItem]
      relationData.model = "relationCon"
      delete relationData.value
      delete relationData.valueStr
      this.$emit("newRelationBack", relationData)
    },
    editRelation() {
      if (this.relationItem.valueStr != "null") {
        let [inputValue1, selectValue, inputValue2] = this.relationItem.valueStr.replace("#", "").split(" ")
        this.inputValue1 = inputValue1
        this.inputValue2 = inputValue2.replace(/\\'/g, "")
        this.selectValue = selectValue
      }
      this.dialogShow = true
    },
    removeRelation() {
      this.$emit("removeRelation", this.relationItem)
    },
    saveData() {
      let inputValue2 = isNumber(this.inputValue2) ? this.inputValue2 : `'${this.inputValue2}'`
      this.relationItem.valueStr = `#${this.inputValue1} ${this.selectValue} ${inputValue2}`
      this.relationItem.value = {lable: this.inputValue1, value: this.inputValue2, condition: this.selectValue}
      this.dialogShow = false
      this.$emit("input", this.relationItem)
      this.$emit("relationUpdate", this.relationItem)
    }
  }
}
</script>

<style scoped>
.relation-card {
  width: fit-content;
  padding: 10px;
  background: #c4dff5;
  border-radius: 10px;
}

.dropdown-view {
  font-size: 20px;
  margin-left: 8px;
  max-resolution: 5px;
  line-height: 0;
}

.relation-view {
  position: relative;
}

.close-view {
  position: absolute;
  top: -7px;
  right: -15px;
  font-size: 15px;
  color: #fd1d1d;
  font-weight: bold;
}

/deep/ .el-input__inner {
  color: cornflowerblue;
  font-weight: bold;
  border-color: cornflowerblue;
}
</style>
